<template>
    <div class="login">
        <div class="login-container">
            <h3 class="login_title">系统登录</h3>
            <el-form :model="form" status-icon ref="form" label-width="100px" class="login-container-form">
                <!-- <el-form-item label="项目名称">
                    <el-input type="input" v-model="form.tenant" autocomplete="off" placeholder="请输入项目名称"></el-input>
                </el-form-item>-->
                <el-form-item label="用户账号">
                    <el-input type="input" v-model="form.UserName" autocomplete="off" placeholder="请输入您的用户账号名"></el-input>
                </el-form-item>
                <el-form-item label="登录密码">
                    <el-input type="password" v-model="form.Password" autocomplete="off" placeholder="请输入您的登录密码"></el-input>
                </el-form-item>
                <!-- <el-form-item label="验证码">
                    <el-input type="password" v-model="form.vercode" autocomplete="off" placeholder="请输入验证码"></el-input>
                    <div class="code-box">
                        <img :src="codeImg" @click="getSrc" alt />
                    </div>
                </el-form-item>-->
                <el-form-item class="login_submit">
                    <el-button type="primary" @click="login" class="login_submit">登录</el-button>
                </el-form-item>
            </el-form>
            <el-checkbox label="记住密码" v-model="checked" @change.native="rememberUser"></el-checkbox>
        </div>
    </div>
</template>

<script>
import { getLogin } from '../../api/data';
import Cookie from 'js-cookie';
export default {
    name: 'newLogin',
    data() {
        return {
            randomStr: '',
            codeImg: '',
            checked: false,
            form: {
                // tenant: '理控物联',
                UserName: '',
                Password: '',
                // vercode: '',
            },
        };
    },
    methods: {
        async login() {
            await getLogin(this.form).then((data) => {
                this.$store.commit('setToken', data);
                this.$router.push({
                    name: 'main',
                });
            });
        },
        //获取图形验证码
        getSrc() {
            var random = this.getRandomLenNum(4, true);
            this.randomStr = random;
            this.codeImg = '';
            this.codeImg = this.$store.state.user.url + '/code?randomStr=' + random;
        },
        // 计算随机数
        getRandomLenNum(len, date) {
            var random = '';
            random = Math.ceil(Math.random() * 100000000000000)
                .toString()
                .substr(0, len || 4);
            if (date) random = random + Date.now();
            return random;
        },
        // 记住密码
        rememberUser() {
            if (this.checked) {
                Cookie.set('username', this.form.UserName);
                Cookie.set('password', this.form.Password);
            } else {
                Cookie.remove('username');
                Cookie.remove('password');
            }
        },
        // 自动填充账号密码
        getRememberUser() {
            if (Cookie.get('username')) {
                this.checked = true;
                this.form.UserName = Cookie.get('username');
                this.form.Password = Cookie.get('password');
            }
        },
    },
    mounted() {
        this.getSrc();
        this.getRememberUser();
    },
};
</script>

<style lang="scss" scoped>
@import '@/assets/css/login/index.scss';
</style>